<template class="container">
  <view class="nav">
    <view class="nav_item">
      <uni-icons type="medal" color="#f1d932" size="50"></uni-icons>
      <h4 class="nav_num">{{ curron.zong.day }}kWh</h4>
      <text class="nav_text">本日总用电量</text>
    </view>
    <view class="nav_item">
      <uni-icons type="medal" size="50" color="#f1d932"></uni-icons>
      <h4 class="nav_num">{{ curron.zong.month }}kWh</h4>
      <text class="nav_text">本月总用电量</text>
    </view>
    <view class="nav_item">
      <uni-icons type="medal" size="50" color="#f1d932"></uni-icons>
      <h4 class="nav_num">{{ curron.zong.year }}kWh</h4>
      <text class="nav_text">本年总用电量</text>
    </view>
  </view>
  <view class="main">
    <view class="card" v-for="(line, index) in curron.lines" :key="index">
      <view class="header">
        <view class="header_tit">
          <span class="title">{{ line.title }}</span>
          <span class="code">编号：{{ line.addr }}</span>
        </view>

        <view class="actions">
          <!-- <button class="connect" type="default" size="mini">连接</button>
          <button class="details" type="default" size="mini">详情</button> -->
        </view>
      </view>
      <view class="usage">
        <span>{{ line.day }}kWh</span>
        <span>{{ line.month }}kWh</span>
        <span>{{ line.year }}kWh</span>
      </view>
      <view class="labels">
        <span>本日用电量</span>
        <span>本月用电量</span>
        <span>本年用电量</span>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getPowerStat } from "@/api/wuLian.js";
const curron = ref({});
onLoad((option) => {
  // http://www.xuangou.com/wxapp/getPowerStat?mac=98CC4D177968
  getPowerStat(option.mac).then((e) => {
    console.log(e, 57);
    curron.value = e.data;
  });
});
</script>

<style scoped>
.header_tit {
  display: flex;
  flex-direction: column;
}

.main {
  padding: 10px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  margin-bottom: 10px;
  padding: 10px;
  margin: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.code {
  font-size: 14px;
  color: #666666;
}

.usage {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 600;
}

.labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.actions {
  display: flex;
  justify-content: flex-end;
}

.connect,
.details {
  margin-left: 5px;

  border: none;
}

html,
uni-page-body,
.container {
  width: 100%;
  height: 100%;
}

.nav_text {
  font-size: 14px;
}

.nav {
  width: 100%;
  background-color: #e60012;
  display: flex;
  color: #ffffff;
  justify-content: space-between;
}

.nav_item {
  padding: 10px;
  width: 33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav_num {
  margin: 10px 0px;
}

/* 新的 */
</style>
